<template>
  <div class="index-lunbo">
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide>
        <img
          src="	https://ossweb-img.qq.com/upload/adw/image/194/20220407/e90cf3c8c7eb25cc07d8e965056e177e.jpeg"
          alt=""
        />
      </swiper-slide>
      <swiper-slide>
        <img
          src="//ossweb-img.qq.com/upload/adw/image/194/20220403/a907fe10b13c20c4623b131dd76a52a2.jpeg"
          alt=""
        />
      </swiper-slide>
      <swiper-slide>
        <img
          src="//ossweb-img.qq.com/upload/adw/image/194/20220402/ce930a21e0d267ba289f13f418892de1.jpeg"
          alt=""
        />
      </swiper-slide>
      <swiper-slide>
        <img
          src="	https://ossweb-img.qq.com/upload/adw/image/194/20220407/f4f26fa3840eb163a452d0e94073d67b.jpeg"
          alt=""
        />
      </swiper-slide>
      <swiper-slide>
        <img
          src="//ossweb-img.qq.com/upload/adw/image/194/20220401/1e5169c0f1de37e25af83a5af3d0e293.jpeg"
          alt=""
        />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperOption: {
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          //   dynamicBullets: true,
          clickable: true,
        },
        autoplay: {
          delay: 3000, //1秒切换一次
          disableOnInteraction: false,
        },
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.index-lunbo {
  height: 100%;
  .swiper {
    width: 100%;
    height: 100%;
    position: relative;
    .swiper-pagination {
      background-color: rgba(0, 0, 0, 0.801);
      width: 100% !important;
      position: absolute;
      bottom: 0;
      height: 44px;
      display: flex;
      color: rgba(255, 255, 255, 0.986);
    }
  }
}
</style>
<style lang="scss">
.swiper-pagination-bullet {
  //   border: 1px solid red;
  font-size: 15px !important;
  border-radius: 0 !important;
  width: 25% !important;
  height: 100% !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: space-around;
  align-items: center;
  &:first-child::before {
    content: "艾琳语音抢先听";
  }
  &:nth-child(2)::before {
    content: "大神教你玩";
  }
  &:nth-child(3)::before {
    content: "KPL我来了";
  }
  &:nth-child(4)::before {
    content: "本周热门打法";
  }
  &:nth-child(5)::before {
    content: "K甲每周之星";
  }
}
.swiper-pagination-bullet-active {
  background-color: gray !important;
  color: orange;
}
</style>